import { observer } from 'mobx-react';
import { observable } from 'mobx';

import { Modal, Card, Col } from "antd";
import { WeaNewScroll } from 'ecCom';
import AppSkinList from "./AppSkinList";

@observer export default class AppSkin extends React.Component {
    @observable selectedSkin = -1;
    @observable isSaving = false;

    setAppSkin() {
        const { selectedSkin, props } = this;
        const { appid, setAppSkin, closeAppSkin } = props;

        this.isSaving = true;

        setAppSkin(appid, selectedSkin).then(() => {
            closeAppSkin();
            that.isSaving = false;
        });
    }

    render() {
        const { props, isSaving } = this;
        const { visible, closeAppSkin, appid } = props;
        const using = (
            <a href="javascript:;" style={{position:"relative",top:"-15px",right:"-24px"}}>
                <i className="icon-mobilemode" style={{fontSize:"45px"}}>&#xe610;</i>
            </a>
        );
        
        return (
            <Modal
                title="皮肤设置"
                width="650"
                wrapClassName="appskin-modal"
                visible={visible}
                confirmLoading={isSaving}
                onOk={this.setAppSkin.bind(this)}
                onCancel={closeAppSkin}>
                <WeaNewScroll scrollId="skinlist" height="500">
                    <AppSkinList appid={appid} onSelect={skin=>{ this.selectedSkin = skin; }}></AppSkinList>
                </WeaNewScroll>
            </Modal>
        );
    }
}